*{
  user-select: none;
  -webkit-user-select: none;
}
body{
  background-color: #222;
  margin:0;
  padding:0;
}
div{
  box-sizing: border-box;

}
.boss{
  width: 100vw;
  height: 100vh;
  margin:0 auto;
  position: relative;
  overflow: hidden;
  opacity:0;
  transition: opacity 500ms;
  &.show{
    opacity: 1;
  }
}
.canvas-box {
  height: calc(100vh - 120px);
  background-image:url(./assets/imgs/back2.jpeg);
  background-size: cover;
  background-position: center bottom;
  box-shadow: 0 0 50px inset #000033;
  canvas {
    display: block;
  }
}

.control-box{
  position: relative;
 height: 120px;
 background-color: #ccc;
 display: flex;
 align-items: center;
 z-index: 10;
 background-image: url(./assets/imgs/back-girl.jpg);
 background-size: cover;
 background-position: center center;
 border-top :solid 2px #fff;
 &::after{
   content: "";
   position: absolute;
   top: 5px;
   left: 5px;
   width: calc(100% - 10px);
   height: calc(100% - 10px);
   border: solid 1px #fff;
   border-radius: 4px;
   z-index: 1;
 }
 &>div{
   flex: none;
   width: 33.333%;
   text-align: center;
   z-index: 2;
   &.btn-box{
     align-self: flex-end;
     padding-bottom: 20px;
   }
   .btn{
     width: 80px;
     height: 80px;
     border:solid 2px #ccc;
     border-radius: 100%;
     border: solid 2px #fff;
     transition: all 128ms;
     box-shadow: 0 5px 10px #222;
     outline: none;
     background-color: #ff8822;
     transform: translateY(-3px);
     color:#f0f0f0;
     &:active{
       box-shadow: 0 3px 4px #888;
       transform: translateY(0);
     }
   }
   .btn2{
    &+.btn2{
      margin-top: 10px;
    }
    width: 80px;
    height: 32px;
    border:solid 2px #ccc;
    border-radius: 20px;
    border: solid 2px #fff;
    transition: all 128ms;
    box-shadow: 0 5px 10px #222;
    outline: none;
    background-color: #22cc22;
    transform: translateY(-3px);
    color:#f0f0f0;
    font-size: 12px;
    &:active{
      box-shadow: 0 3px 4px #888;
      transform: translateY(0);
    }
    &.music-btn{
      background-color: #888;
      &.play{
        background-color: #22cc22;
      }
    }
   }
 }
}

@keyframes pao-animation{
  0% {transform: translateY(0); opacity:0}
  10%{transform: translateY(-10vh); opacity:0.4}
  90%{transform: translateY(-100vh); opacity:0.8}
  100% {transform: translateY(-110vh); opacity:0}
}
@-webkit-keyframes pao-animation{
  0% {transform: translateY(0); opacity:0}
  10%{transform: translateY(-10vh); opacity:0.4}
  90%{transform: translateY(-100vh); opacity:0.8}
  100% {transform: translateY(-110vh); opacity:0}
}
@keyframes love-move{
  0% {opacity:0; transform: translateY(0)}
  10% {opacity:1; transform: translateY(-5px)}
  90% {opacity:1; transform: translateY(-45px)}
  100% {opacity:0; transform: translateY(-50px)}
}
@-webkit-keyframes love-move{
  0% {opacity:0; -webkit-transform: translateY(0)}
  10% {opacity:1; -webkit-transform: translateY(-5px)}
  90% {opacity:1; -webkit-transform: translateY(-45px)}
  100% {opacity:0; -webkit-transform: translateY(-50px)}
}

@keyframes yu-r{
  0% {transform: rotateY(180deg) translateX(0)}
  100%{transform: rotateY(180deg) translateX(-120vw)}
}
@-webkit-keyframes yu-r{
  0% {-webkit-transform: rotateY(180deg) translateX(0)}
  100%{-webkit-transform: rotateY(180deg) translateX(-120vw)}
}

@keyframes yu-l{
  0% {transform: translateX(0)}
  100%{transform: translateX(-110vw)}
}
@-webkit-keyframes yu-l{
  0% {-webkit-transform: translateX(0)}
  100%{-webkit-transform: translateX(-110vw)}
}

.back-box{
  height: calc(100vh - 120px);
  width: 100%;
  position: absolute;
  top:0;
  left:0;
  z-index: 2;
  overflow: hidden;
  .pao{
    position: absolute;
    bottom: -20px;
    padding: 10px;
    width: 39px;
    height: 100px;
    background-image: url(./assets/imgs/pao.png);
    opacity: 0;
    animation-duration: 3s;
    animation-timing-function: linear;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    &.pao-move{
      animation-name: pao-animation;
      -webkit-animation-name: pao-animation;
      
    }
  }
  .yu{
    position: absolute;
    width: 40px;
    height: auto;
    opacity: .6;
    left: -40px;
    animation-duration: 4s;
    animation-timing-function: linear;
    -webkit-animation-duration: 4s;
    -webkit-animation-timing-function: linear;
    &.yu-movetoright{
      animation-name: yu-r;
      -webkit-animation-name: yu-r;
    }
    &.yu-movetoleft{
      animation-name: yu-l;
      -webkit-animation-name: yu-l;
    }
    
  }
}
.first-info{
  position: absolute;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(10px);
  padding: 20px;
  z-index: 12;
  top: 20px;
  width: calc(100% - 40px);
  left: 20px;
  border-radius: 6px;
  text-align: justify;
  background-color: rgba(33,44,200,.5);
  color: #fff;
  transition: all 1000ms;
  &.show{
    opacity: 1;
    transform: translateY(0);
  }
}
.success{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 12;
  transition: opacity 300ms;
  &.show{
    opacity: 1;
    pointer-events: auto;
    .info{
      transform: scale(1,1);
    }
    .new-game{
      bottom: 20px;
    }
  }
  .success-back{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .love-icon{
    position: absolute;
    width: 28px;
    height: auto;
    opacity: 0;
    &.love-move{
      animation-name: love-move;
      animation-duration: 1.2s;
      animation-timing-function: linear;
      -webkit-animation-name: love-move;
      -webkit-animation-duration: 1.2s;
      -webkit-animation-timing-function: linear;
    }
  }
  .info{
    position: absolute;
    transform: scale(0,0);
    transition: all 500ms;
    top: 20px;
    left: 0;
    width: 100%;
    color: #fff;
    text-align: center;
    text-shadow: 0 0 10px #4566b4;
    .title{
      font-size: 18px;
      font-weight: bold;
    }
  }
  .new-game{
   position: absolute;
   transition: bottom 500ms;
   left: 50%;
   bottom: -20px;
   padding: 5px 20px;
   height: 32px;
   border:solid 2px #ccc;
   border-radius: 20px;
   border: solid 2px #fff;
   transition: all 128ms;
   box-shadow: 0 5px 10px #222;
   outline: none;
   background-color: #22cc22;
   transform: translateY(-3px) translateX(-50%);
   color:#f0f0f0;
   &:active{
     box-shadow: 0 3px 4px #888;
     transform: translateY(0) translateX(-50%);
   }
  }
}